<template>
  <div class="navbar">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">
      <i class="fa fa-bars" aria-hidden="true"></i>

      <div class="container" style="margin-top:4px;">
        <div class="lunbo" @mouseenter="clear" @mouseleave="run">
          <div class="img">
            <img :src="dataList[currentIndex]" alt />
          </div>
          <div class="dooted" v-if="this.dataList.length">
            <h4 style="text-align:center;font-family:'宋体'">{{msg}}</h4>
          </div>
        </div>
      </div>
      <span style="position: absolute;top: 0px;right: 50%;" v-if="'loginStatus'">{{userInfo.uname}}</span>
      <el-button style="position: absolute;right: 50%;top: 2px;" v-else type="primary" round>登录/注册</el-button>
    </label>
    <ul>
      <li>
        <img :src="userInfo.file" alt @click="dialogFormVisible = true" v-if="userInfo.file" />
        <!-- 修改图片功能尚未实现 -->
        <img src="../access/img/1.png" @click="dialogFormVisible = true" v-else />
        <span>欢迎你：{{userInfo.uname}}</span>
        <!-- 点击dialogFormVisible，弹出弹窗，显示用户名，密码，头像信息以及更改图片按钮，选择图片之后替换成更改的的图片 -->
        <!-- <form
          action=php+"update_admin_info.php"
          method="post"
          enctype="multipart/form-data"
        >-->
        <el-dialog
          title="更改信息"
          :visible.sync="dialogFormVisible"
          width="30%"
          :close-on-click-modal="false"
          :before-close="handleClose"
        >
          <input type="hidden" name="id" v-model="userInfo.id" />
         <el-label>用户名：<input type="text" name="uname" v-model="userInfo.uname"  /></el-label><br />
          <el-label>密码：<input type="password" name="password" v-model="userInfo.password" /></el-label>
          <!-- <input type="file" name="image" /> -->
          <el-upload
            action
            :on-change="handleelchange"
            :auto-upload="false"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

          <!-- <input type="file" @change="onchangemd" /> -->

          <!-- <button type="submit">修改</button> -->
          <el-button type="primary" @click="handleSubmit">修改</el-button>

          <el-button @click="dialogFormVisible = false" style="background-color:cornflowerblue">取消</el-button>
        </el-dialog>
        <!-- </form> -->
      </li>
      <li>
        <a>
          <i class="fa fa-home" aria-hidden="true"></i>
          <span>前台首页</span>
        </a>
      </li>
      <li>
        <router-link to="/tb_list">
          <a>
            <i class="fa fa-sitemap" aria-hidden="true"></i>
            <span>库存列表</span>
          </a>
        </router-link>
      </li>
      <li>
        <router-link to="/user">
          <a>
            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
            <span>用户列表</span>
          </a>
        </router-link>
      </li>
      <li>
        <router-link to="/order">
          <a>
            <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            <span>订单列表</span>
          </a>
        </router-link>
      </li>
      <li>
        <router-link to="/login">
          <a @click="loginOut">
            <i class="fa fa-th-large" aria-hidden="true"></i>
            <span>退出登录</span>
          </a>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import php from '../api/php.js';
import { mapState, mapMutations } from "vuex";
import axios from "axios";
/*
跨域问题尚未解决
*/
export default {
  name: "Home",
  components: {},
  data() {
    return {
      msg: "欢迎使用汽车配件进销存管理系统",
      dialogTableVisible: false,
      dialogFormVisible: false,
      handleClose() {
        this.dialogFormVisible = false;
      },
      dataList: [
        "../src/access/img/home.jpg",
        "../src/access/img/home2.jpg",
        "../src/access/img/home3.jpg"
      ],
      currentIndex: 0, // 默认显示图片
      timer: null // 定时器
    };
  },
  created() {
    this.run();
  },

  computed: {
    ...mapState({
      loginStatus: state => state.user.loginStatus,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    //退出登录
    ...mapMutations(["loginOut"]),
    onchangemd(e) {
      // console.log(e.target.files); //这个就是选中文件信息
      let userInfo = this.userInfo;
      let formdataa = new FormData();
      Array.from(e.target.files).map(item => {
        console.log(item);
        formdataa.append("file", item); //将每一个文件图片都加进formdata
        formdataa.append("id", userInfo.id);
        formdataa.append("uname", userInfo.uname);
        formdataa.append("password", userInfo.password);
      });
      axios
        .post(php+"update_admin_info.php", formdataa)
        .then(res => {
          // console.log(res);
        });
    },
    handleelchange(file, fileList) {
      // console.log(file, fileList);
      let formdatas = new FormData();
      fileList.map(item => {
        //fileList本来就是数组，就不用转为真数组了
        formdatas.append("file", item.raw); //将每一个文件图片都加进formdata
      });
      axios
        .post(php+"update_admin_info.php", formdatas)
        .then(res => {
          console.log(res);
        });
    },

    next() {
      if (this.currentIndex === this.dataList.length - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
    },
    up() {
      if (this.currentIndex === 0) {
        this.currentIndex = this.dataList.length - 1;
      } else {
        this.currentIndex--;
      }
    },
    clear() {
      clearInterval(this.timer);
    },
    // 定时器
    run() {
      this.timer = setInterval(() => {
        this.next();
      }, 2000);
    },

    handleSubmit(e) {
      //获取用户输入的信息
      let userInfo = this.userInfo;
      e.preventDefault(); //阻止默认事件
      let formdataa = new FormData();

      formdataa.append("id", userInfo.id);
      formdataa.append("uname", userInfo.uname);
      formdataa.append("password", userInfo.password);

      this.$axios
        .post(php+"up_tb_admin.php", formdataa)
        .then(res => {
          // console.log(formData);
          // console.log(res.data);
          if (res.data.code == 200) {
            this.$message({
              message: "更改成功",
              type: "success"
            });
            this.dialogFormVisible = false;
            return;
          } else {
            this.$message({
              message: "更改失败,请重试",
              type: "error"
            });
            return;
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
* {
  /* 初始化 取消内外边距*/
  margin: 0;
  padding: 0;
}

body {
  /* 溢出隐藏 */
  overflow: hidden;
}

.navbar {
  /* 相对定位 */
  position: relative;
  /* 100%的窗口宽度 */
  width: 100vw;
}

#checkbox {
  /* 隐藏复选框 */
  display: none;
}
input{
  // 好看的输入框
  border: none;
  outline: none;
  border-bottom: 1px solid #ccc;
  padding: 0;
  font-size: 14px;
  color: #666;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;

}
button{
  // 好看的按钮
  border: none;
  outline: none;
  border-radius: 5px;
  // 背景色为绿色
  background-color: #5cb85c;
  color: #fff;
  font-size: 14px;
  padding: 0 20px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  margin-top: 5px;
}
.navbar label {
  position: absolute;
  top: 0;
  left: 70px;
  width: 100%;
  height: 43px;
  font-size: 30px;
  color: #5a738e;
  background-color: #ededed;
  padding-left: 20px;
  border: 1px solid #d9dee4;
  /* 鼠标放上变小手 */
  cursor: pointer;
  /* 加上动画过渡 */
  transition: all 0.5s;
}

.navbar ul {
  list-style: none;
  width: 70px;
  /* 100%的窗口高度 */
  height: 100vh;
  background-color: #2a3f54;
  transition: all 0.5s;
  /* 溢出隐藏 */
  overflow: hidden;
}

.navbar ul li {
  height: 70px;
  margin-bottom: 10px;
}

.navbar ul li:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.navbar ul li:first-child img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.navbar ul li:first-child span {
  color: #fff;
  /* 文字禁止换行 */
  white-space: nowrap;
  padding-left: 10px;
  /* 先把文字隐藏 */
  display: none;
}

.navbar ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 垂直排列 */
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #d1d1d1;
  /* 去掉下划线 */
  text-decoration: none;
}

.navbar ul li a i {
  font-size: 25px;
  margin-bottom: 10px;
}

.navbar ul li a span {
  font-size: 12px;
  white-space: nowrap;
}

.navbar ul li a:hover {
  color: #fff;
  background-color: #35495d;
}

/* :checked选择器是判断复选框是否被选中 */
/* +是相邻兄弟选择器，找到input的下一个兄弟label */
.navbar input:checked + label {
  left: 200px;
}

/* ~也是兄弟选择器，但它可以找到隔了几代的兄弟 */
.navbar input:checked ~ ul {
  width: 200px;
}

.navbar input:checked ~ ul li:first-child {
  /* 将居中改为开头对齐 */
  justify-content: flex-start;
}

.navbar input:checked ~ ul li:first-child span {
  /* 文字显示 */
  display: block;
}

.navbar input:checked ~ ul li a {
  flex-direction: row;
  justify-content: flex-start;
}

.navbar input:checked ~ ul li a i {
  font-size: 18px;
  margin: 0 15px 0 30px;
}
.navbar input:checked ~ ul li a span {
  font-size: 14px;
}
</style>